﻿.dial-button {
    --bb-dial-list-zindex: 5;
    --bb-dial-item-padding: 0.25rem 1rem;
    --bb-dial-item-bg: #fff;
    --bb-dial-item-hover-bg: #e9ecef;
    --bb-dial-item-hover-color: var(--bs-body-color);
    --bb-dial-item-hover-border-color: #c0c4cc;
    --bb-dial-item-border: 1px solid #dee2e6;
    --bb-dial-item-margin: 6px;
    --bb-dial-item-width: 40px;
    --bb-dial-item-height: 40px;
    --bb-dial-item-radius: 50%;
    --bb-dial-item-shadow: 0 1px 6px #c0c4cc;
    --bb-dial-list-radial-offset: 8px;
    position: relative;
    display: inline-flex;
}

    .dial-button .dial-list {
        overflow: hidden;
        position: absolute;
        z-index: var(--bb-dial-list-zindex);
        pointer-events: none;
        display: flex;
    }

        .dial-button .dial-list:not(.show) {
            visibility: hidden;
        }

        .dial-button .dial-list .dial-list-content {
            display: flex;
            flex-wrap: nowrap;
        }

        .dial-button .dial-list .dial-item {
            pointer-events: auto;
            padding: var(--bb-dial-item-padding);
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            background-color: var(--bb-dial-item-bg);
            border: var(--bb-dial-item-border);
            width: var(--bb-dial-item-width);
            height: var(--bb-dial-item-height);
            border-radius: var(--bb-dial-item-radius);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            box-shadow: var(--bb-dial-item-shadow);
            transition: background-color .3s linear, border-color .3s linear;
        }

        .dial-button .dial-list .dial-item {
            margin: var(--bb-dial-item-margin);
        }

            .dial-button .dial-list .dial-item:hover {
                background-color: var(--bb-dial-item-hover-bg);
                border-color: var(--bb-dial-item-hover-border-color);
                color: var(--bb-dial-item-hover-color);
            }

    .dial-button[data-bb-placement*="top"] .dial-list {
        top: var(--bb-dial-list-vertical-offset);
        left: var(--bb-dial-list-horizontal-offset);
    }

    .dial-button[data-bb-placement*="bottom"] .dial-list {
        bottom: var(--bb-dial-list-vertical-offset);
        left: var(--bb-dial-list-horizontal-offset);
    }

    .dial-button[data-bb-placement="middle-end"] .dial-list {
        top: var(--bb-dial-list-vertical-offset);
        right: var(--bb-dial-list-horizontal-offset);
    }

    .dial-button[data-bb-placement="middle-center"] .dial-list,
    .dial-button[data-bb-placement="middle-start"] .dial-list {
        top: var(--bb-dial-list-vertical-offset);
        left: var(--bb-dial-list-horizontal-offset);
    }

    .dial-button[data-bb-placement*="top"] .dial-list-content {
        flex-direction: column;
        height: var(--bs-dial-list-height);
    }

    .dial-button[data-bb-placement*="bottom"] .dial-list-content {
        flex-direction: column-reverse;
        height: var(--bs-dial-list-height);
    }

    .dial-button[data-bb-placement="middle-end"] .dial-list-content {
        flex-direction: row-reverse;
    }

    .dial-button.is-radial[data-bb-placement="top-start"] .dial-list {
        border-bottom-right-radius: 100%;
    }

    .dial-button.is-radial[data-bb-placement="top-center"] .dial-list {
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
        width: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-width)));
        left: var(--bb-dial-list-horizontal-offset);
    }

    .dial-button.is-radial[data-bb-placement="top-end"] .dial-list {
        border-bottom-left-radius: 100%;
        right: 0;
    }

    .dial-button.is-radial[data-bb-placement="middle-start"] .dial-list {
        border-top-right-radius: 100%;
        border-bottom-right-radius: 100%;
        height: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-height)));
        top: var(--bb-dial-list-vertical-offset);
    }

    .dial-button.is-radial[data-bb-placement="middle-center"] .dial-list {
        border-radius: 50%;
        width: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-width)));
        height: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-height)));
        top: var(--bb-dial-list-vertical-offset);
        left: var(--bb-dial-list-horizontal-offset);
    }

    .dial-button.is-radial[data-bb-placement="middle-end"] .dial-list {
        border-top-left-radius: 100%;
        border-bottom-left-radius: 100%;
        height: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-height)));
        top: var(--bb-dial-list-vertical-offset);
        right: 0;
    }

    .dial-button.is-radial[data-bb-placement="bottom-start"] .dial-list {
        border-top-right-radius: 100%;
        bottom: 0;
        left: 0;
    }

    .dial-button.is-radial[data-bb-placement="bottom-center"] .dial-list {
        border-top-left-radius: 100%;
        border-top-right-radius: 100%;
        width: calc(2 * (var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-width)));
        bottom: 0;
        left: var(--bb-dial-list-horizontal-offset);
    }

    .dial-button.is-radial[data-bb-placement="bottom-end"] .dial-list {
        border-top-left-radius: 100%;
        bottom: 0;
        right: 0;
    }

    .dial-button.is-radial .dial-list {
        width: calc(var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-width));
        height: calc(var(--bb-dial-radial-radius) + 1.5 * var(--bb-dial-item-height));
        --bb-dial-item-margin: 2px;
    }

        .dial-button.is-radial .dial-list .dial-list-content {
            position: relative;
            height: inherit;
            width: inherit;
            border-radius: 100%;
        }

            .dial-button.is-radial .dial-list .dial-list-content .dial-item {
                position: absolute;
                transform: rotate(var(--bb-dial-item-angle)) translate(var(--bb-dial-radial-radius)) rotate(calc(-1 * var(--bb-dial-item-angle)));
            }

    .dial-button.is-radial[data-bb-placement="top-center"] .dial-item {
        left: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-horizontal-offset));
    }

    .dial-button.is-radial[data-bb-placement="top-end"] .dial-item {
        right: 0;
    }

    .dial-button.is-radial[data-bb-placement="middle-start"] .dial-item {
        top: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-vertical-offset));
    }

    .dial-button.is-radial[data-bb-placement="middle-center"] .dial-item {
        top: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-vertical-offset));
        left: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-horizontal-offset));
    }

    .dial-button.is-radial[data-bb-placement="middle-end"] .dial-item {
        top: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-vertical-offset));
    }

    .dial-button.is-radial[data-bb-placement="bottom-center"] .dial-item {
        bottom: 0;
        left: calc(0px - 2 * var(--bb-dial-item-margin) - var(--bb-dial-list-horizontal-offset));
    }

    .dial-button.is-radial[data-bb-placement="bottom-end"] .dial-item {
        bottom: 0;
        right: 0;
    }

.bb-animation-fadein {
    animation: .2s cubic-bezier(0.42, 0, 1, 1) 0s 1 normal none running FadeIn
}

.bb-animation-fadeout {
    animation: .2s cubic-bezier(0, 0, 0.58, 1) 0s 1 normal none running FadeOut
}

@keyframes FadeIn {
    0% {
        filter: alpha(opacity=0);
        opacity: 0
    }

    100% {
        filter: alpha(opacity=100);
        opacity: 1
    }
}

@keyframes FadeOut {
    from {
        filter: alpha(opacity=100);
        opacity: 1
    }

    to {
        filter: alpha(opacity=0);
        opacity: 0
    }
}
